<script setup lang="ts">
  import { ref } from 'vue';
  import ElderlySelect from '../components/elderly-select.vue';
  import Detail from './detail.vue';

  const elderId = ref('');

  const onChange = (data: any) => {
    if (data) {
      elderId.value = data.elderId;
    } else {
      elderId.value = '';
    }
  };
</script>

<template>
  <div class="flex flex-row gap-5 full-h-wrapper">
    <ElderlySelect @change="onChange" />
    <div v-if="elderId" class="flex-1 h-full py-2 px-4 border rounded shadow">
      <Detail :elder-id="elderId" />
    </div>
    <div
      v-else
      class="flex-1 overflow-y-hidden h-full py-2 px-4 border rounded shadow flex justify-center items-center"
    >
      <a-empty>
        <template #image>
          <icon-empty size="100" />
        </template>
        <span class="text-xl">暂无数据</span>
      </a-empty>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
